<template>
	<uxt-color-selector
		:name="name"
		v-model="value1"
		:clearable="clearable"
		:system="system"
		:light="light"
		:gradual="gradual"
		:customize="customize"
		:position="position"
        :disabled="disabled"
		@change="handleChange"
		@opened="focus = true"
		@closed="focus = false"
        @cancel="$emit('cancel', $event)"
        @clear="$emit('clear', $event)"
	>
		<uxt-bar
			:classes="classes"
			:styles="styles"
			:color="color"
			:bg-color="bgColor"
			:icon="icon"
			:title="title"
			:desc="desc"
			:arrow="arrow"
			:box="box"
			:round="round"
			:radius="radius"
			:focus="focus"
            :content="content2"
		>
			<template slot="left">
				<text class="text-red" v-if="star">*</text>
				<slot name="left"></slot>
			</template>
			<template slot="right">
				<view class="flex align-center justify-end">
					<view v-if="this.value1" class="content solid margin-left-xs" :class="[contentClass]" :style="{ backgroundColor: contentStyle }"></view>
                    <slot name="right"></slot>
				</view>
			</template>
		</uxt-bar>
	</uxt-color-selector>
</template>

<script>
import baseMixin from '../mixins/base.js'
import barMixin from '../mixins/bar.js'
import rrMixin from '../mixins/rr.js'
import uxtColorSelector from './uxt-color-selector.vue'
import uxtBar from './uxt-bar.vue'

export default {
	name: 'uxt-color-selector-bar',
	mixins: [baseMixin, barMixin, rrMixin],
	components: {
		uxtColorSelector,
		uxtBar
	},
	props: {
		name: {
			type: String
		},
		value: {
			type: String,
			default: ''
		},
		// 红星
		star: {
			type: Boolean,
			default: false
		},
		// 弹出位置 bottom/center
		position: {
			type: String,
			default: 'bottom',
			validator(value) {
				return ['bottom', 'center'].includes(value)
			}
		},
		// 是否显示清除
		clearable: {
			type: Boolean,
			default: false
		},
		// 是否显示系统定义的颜色
		system: {
			type: Boolean,
			default: true
		},
		// 是否显示系统定义的亮色
		light: {
			type: Boolean,
			default: false
		},
		// 是否显示系统定义的渐变色
		gradual: {
			type: Boolean,
			default: false
		},
		// 是否显示自定义颜色选择
		customize: {
			type: Boolean,
			default: true
		},
        disabled: {
            type: Boolean,
            default: false
        },
		bgColor: {
			default: 'white'
		},
		arrow: {
			default: true
		},
        content: {
            default: '请选择'
        }
	},
	data() {
		return {
			focus: false,
            value1: this.value
		}
	},
	computed: {
		contentClass() {
			return this.getColor(this.value1, 'bg-').classes
		},
		contentStyle() {
			return this.getColor(this.value1).styles
		},
        content2() {
            return this.value1 || this.content
        }
	},
    watch: {
        value(newVal, oldVal) {
            this.value1 = this.value
        }
    },
	methods: {
		handleChange(e) {
			this.$emit('change', e)
			this.$emit('input', e.detail.value)
		}
	}
}
</script>

<style lang="scss" scoped>
.content {
	width: 40rpx;
	height: 40rpx;
}
</style>
